<template>
	<!-- 背景图 -->
	<view class="playbackgroundimg" :style="{background:'url('+backgroundimg+') no-repeat center'}">
		<view class="backgroundoption">
			<scroll-view scroll-y style="height:100%">
				<!-- 旋转效果 -->
				<view class="transforms">
					<view class="transforms_black">
						<view class="transforms_img">
							<image :src="backgroundimg" mode="widthFix" class="transforms_img_pci"></image>
							<view class="transforms_img_pci_img">
								<image v-if="autos" @click="pause"  src="../../static/play.png" mode="widthFix" class="transforms_img_play"></image>
								<image v-else @click="play" src="../../static/pasue.png" mode="widthFix" class="transforms_img_pasue"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 歌词 -->
				<view class="postgq">
					<view class="crl_lists" style="position:absolute;" :style="{top:'-'+tops+'px'}">
						<view :class="{activecrl:index==act}" class="crl" v-for="(item,index) of geciarr" :key="index">
							{{item[1]}}
						</view>
					</view>	
				</view>
				<!-- 评论 -->
				<view class="hotcommits">
					<text class="hotcommitstitle">精彩评论</text>
					<view style="padding:20rpx" v-for="(item,index) of hotcomments" :key="index" class="hotcommits_list">
						<view class="hotcommits_img">
							<image mode="widthFix" :src="item.user.avatarUrl"></image>
						</view>
						<view class="hotcommits_title">
							<view class="hotcommits_users">
								<view class="hotcommits_users_left">
									<text class="hotcommits_users_left_name">{{item.user.nickname}}</text>
									<text class="hotcommits_users_left_time">{{item.time}}</text>
								</view>
								<view class="hotcommits_users_right">
									<text>{{item.likedCount}}</text>
									<view class="hotcommits_dianzan">
										<image mode="widthFix" src="../../static/dianzan.png"></image>
									</view>
								</view>
							</view>
							<view class="hotcommits_content" v-html="item.content"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 播放的歌曲
				playobj:{},
				// 背景图片
				backgroundimg:"",
				// 获取到的歌曲
				gequ:{},
				// 获取歌词
				geci:{},
				// 播放暂停
				autos:true,
				// 转换后的歌词
				geciarr:[],
				// 转换后的时间
				timearr:[],
				tops:0,
				// 字体颜色
				act:-1,
				// 评论信息
				hotcomments:[]
			}
		},
		onLoad(e) {
			e.picurl=e.picurl+"==/"+e.pic_str+".jpg"
			this.playobj=e
			this.getpalyurl(29774167)
			// console.log(this.playobj)
			this.getmusic(29774167)
			this.navlogin()
			this.backgroundimg=this.playobj.picurl
		},
		methods:{
			// 头部导航
			navlogin(){
				// 设置头部导航
				uni.setNavigationBarTitle({
					title:this.playobj.name
				})
				uni.setNavigationBarColor({
					backgroundColor:"#000000",
					frontColor:"#ffffff"
				})
			},
			// https://autumnfish.cn/register/cellphone?phone=15893141235&password=wyy123456&captcha=4276&nickname=baiduyun123zm
			// 获取歌曲url
			getpalyurl(id){
				uni.request({
					url:"https://autumnfish.cn/song/url?id="+id,
					success:res=>{
						this.gequ=res.data.data[0]
						this.getgeci(id)
						this.infos()
					}
				})
			},
			// 获取歌词
			getgeci(id){
				uni.request({
					url:"https://autumnfish.cn/lyric?id="+id,
					success:res=>{
						var list=res.data.lrc.lyric.split('[');
						var arr=[]
						list.forEach(item=>{
						   arr.push(item.split(']'))
						})
						arr.splice(0,1)
						this.geciarr=arr
						this.geci=res.data
						this.times()
					}
				})
			},
			// 获取评论
			getmusic(id){
				uni.request({
					url:"https://autumnfish.cn/comment/music?id="+id+"&limit=1",
					success: (res) => {
						res.data.hotComments.forEach(item=>{
							item.time=this.datas(item.time)
						})
						this.hotcomments=res.data.hotComments
						console.log(this.hotcomments)
					}
				})
			},
			// 日期转换
			datas(time){
				// 总毫秒数
				var time=time;
				// 剩余毫秒数
				var mili=time%1000;
				// 总秒数
				time=(time-mili)/1000;
				// 剩余秒数
				var second=time%60;
				// 总分钟数
				time=(time-second)/60;
				// 剩余分钟数
				var fonzhong=time%60;
				// 总小时数
				time=(time-fonzhong)/60;
				// 剩余小时数
				var tian=time%24;
				// 总天数
				time=(time-tian)/24
				if(tian==0){
					tian=1
				}
				// 总月数
				var yue=time%12+1;
				console.log('y',yue)
				// 剩余月数
				time=(time-yue)/12;
				// 总年数
				var nian=time%360
				// 剩余年数
				time=(time-nian)/360
				// 当前年数
				time=2021-time
				
				// 完整的日期
				return time+'年'+yue+'月'+tian+'日'
				
				
				
			},
			infos(){
				const inneraudiocontext=uni.createInnerAudioContext()
				// 歌曲地址
				inneraudiocontext.src=this.gequ.url
				// 是否自动播放
				inneraudiocontext.autoplay=true
				// 是否循环播放
				inneraudiocontext.loop=true
				// 音频播放事件
				inneraudiocontext.onPlay(()=>{
					console.log('正在播放')
				})
				// 实时更新播放进度
				inneraudiocontext.onTimeUpdate(()=>{
					this.gettime(parseInt(inneraudiocontext.currentTime))
				})
				// 音频自然播放结束事件
				inneraudiocontext.onEnded(()=>{
					console.log('播放完毕')
				})
				return inneraudiocontext
			},
			gettime(time){
				this.timearr.forEach((item,index)=>{
					if(item==time && item>19){
						this.act+=1
						this.timearr.splice(index,1)
						this.tops+=50;
						index--
					}
					if(time==13){
						this.act=0
					}else if(time==19){
						this.act=1
					}
				})
			},
			// 解析时间进度
			times(){
				var time=this.geciarr;
				var arr=[];
				var fen=0;
				var miao=0
				var timesarr=[]
				time.forEach(item=>{
					arr.push(item[0].split(":"))
				})
				arr.forEach(item=>{
					timesarr.push(parseInt(Number(item[0])*60+Number(item[1])))
				})
				this.timearr=timesarr
			},
			// 播放
			play(){
				this.autos=true
				this.infos().play()
				console.log(this.infos().onPlay(()=>{console.log('播放')}))
			},
			// 暂停
			pause(){
				this.autos=false
				this.infos().pause()
				console.log(this.infos())
				console.log(this.infos().onPause(()=>{console.log('暂停')}))
			}
		}
	}
</script>

<style>
	image{
		display: block;
		width: 100%;
	}
	.playbackgroundimg{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	.backgroundoption{
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgba(255,255,255,.8);
	}
	.transforms{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 500rpx;
		height: 500rpx;
		background-color:#999;
		border-radius: 50%;
		margin-top: 100rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}
	.transforms_black{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 460rpx;
		height: 460rpx;
		background:#000000;
		border-radius: 50%;
		animation:turn 20s linear infinite;
	}
	        /* 
	      turn : 定义的动画名称
	      1s : 动画时间
	      linear : 动画以何种运行轨迹完成一个周期
	      infinite :规定动画应该无限次播放
	     */
	    @keyframes turn{
	      0%{-webkit-transform:rotate(0deg);}
	      25%{-webkit-transform:rotate(90deg);}
	      50%{-webkit-transform:rotate(180deg);}
	      75%{-webkit-transform:rotate(270deg);}
	      100%{-webkit-transform:rotate(360deg);}
	    }
	.transforms_img{
		width: 360rpx;
		height: 360rpx;
		background-color: #eee;
		border-radius: 50%;
		position: relative;
	}
	.transforms_img_pci{
		width: 100%;
		vertical-align: middle;
		border-radius: 50%;
	}
	.transforms_img_pci_img{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: rgba(0,0,0,.4);
		
	}
	.transforms_img_play{
		width: 100%;
		height: 100%;
	}
	.transforms_img_pasue{
		width: 100%;
		height: 100%;
	}
	.postgq{
		width: 750rpx;
		height: 300rpx;
		text-align: center;
		overflow: hidden;
		margin-top: 40rpx;
		position: relative;
	}
	.crl_lists{
		width: 100%;
		position: absolute;
		top:0;
		left: 0;
		right: 0;
	}
	.crl{
		font-size: 28rpx;
		color: #666;
		height: 50px;
		width: 100%;
		text-align: center;
		line-height: 50px;
	}
	.activecrl{
		color:#fff
	}
	
	.hotcommits{
		padding: 20rpx;
	}
	.hotcommitstitle{
		font-size: 32rpx;
		color: #fff;
		margin: 20rpx 0;
	}
	.hotcommits_list{
		display: flex;
		margin-top: 20rpx;
	}
	.hotcommits_img{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10rpx;
	}
	.hotcommits_title{
		flex:1;
		border-bottom: 2rpx solid #eee;
		padding-bottom: 20rpx;
	}
	.hotcommits_users{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.hotcommits_users_left{
		display: flex;
		flex-direction: column;
	}
	.hotcommits_users_left_name{
		font-size: 28rpx;
		color: #666;
	}
	.hotcommits_users_left_time{
		font-size: 24rpx;
		color: #333;
		padding: 10rpx 0;
	}
	.hotcommits_users_right{
		display: flex;
		font-size: 26rpx;
		color: #999;
	}
	.hotcommits_dianzan{
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
	.hotcommits_content{
		font-size: 28rpx;
		color: #fff;
	}
</style>
